<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <!-- 锚链接  href="#xxx" -->
            <a href="#/">home</a> |
            <a href="#/list">list</a>|
            <a href="#/car">car</a>|
            <a href="#/mine">mine</a>|
        </div>
        <div>
            <component :is="comp"></component>
        </div>
    </div>
</body>
<template id="home">
    <div class="home">
        这是主页面
    </div>
</template>
<template id="list">
    <div class="list">
        这是列表页
    </div>
</template>
<template id="car">
    <div class="car">
        这是购物车
    </div>
</template>
<template id="mine">
    <div class="mine">
        这是个人页面
    </div>
</template>
<template id="notFound">
    <div class="notFound">
        404
    </div>
</template>
<script>

    // 路由 

    // 后端路由: 通过访问不同的接口(不同的url地址,不同的请求方式, 不同的参数), 得到不同的数据
    // 前端路由: 通过浏览器访问不同的url地址, 页面显示不同的渲染内容(渲染不同的组件)

    // 市场上目前有两种解决方案: hash / history Api

    // 目的:基于hash自己模拟搭建一个vue-router   => 通过浏览器访问不同的url地址, 页面显示不同的渲染内容(渲染不同的组件)

    // hash
    // 1. hash值 => 锚点 (实现同一个页面不同位置的跳转)
    // 2. 更改hash值不会触发页面刷新
    // 3. hash值不会随url传递给后端(服务端)


    // 监听url上hash值更新 => hash值更新之后渲染对应视图的页面

    // window.addEventListener("hashchange", function (e) {
    //     // {oldURL,newURL} = e;
    //     // console.log("hash值改变", e);
    //     console.log("hash值改变", location.hash);
    // })


    // Vue脚手架的特征
    // 1. 单页面组件  => 一个.vue文件就是一个组件 (template script style)
    // 2. 单页面应用  => 所有页面共用一个vue根实例







    var Home = {
        data() {
            return {}
        },
        template: "#home"
    }

    var List = {
        data() {
            return {}
        },
        template: "#list"
    }

    var Car = {
        data() {
            return {}
        },
        template: "#car"
    }

    var Mine = {
        data() {
            return {}
        },
        template: "#mine"
    }
    var NotFound = {
        data() {
            return {}
        },
        template: "#notFound"
    }


    var router = [{
        path: "/",
        component: Home,
    }, {
        path: "/list",
        component: List,
    }, {
        path: "/car",
        component: Car,
    }, {
        path: "/mine",
        component: Mine,
    }]



    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            path: location.hash.replace("#", "") || "/",

            // 路由配置
            router: router,
        },
        methods: {

        },
        computed: {
            comp() {
                // router => 所有路由配置
                // route  => 当前路由
                // console.log(this.router);

                // find()
                // findIndex()
                var route = this.router.find(v => v.path === this.path);
                return route ? route.component : NotFound;
            }
        },
        components: {
            Home: Home,
            List,
            Car,
            Mine,
            NotFound
        },
        provide: function () {
            return {
                count: this.count,
                getCount: () => this.count, //函数引用类型
                setCount: (v) => this.count = v,
            }
        },
        mounted() {
            window.addEventListener("hashchange", (e) => {
                console.log("hash值改变", location.hash);
                this.path = location.hash.replace("#", "");
                console.log(this.path);
            })
        }
    })





</script>

</html>